<div class="jumbotron">
  <h5>Angular默认会忽略html5验证。如果要覆盖此项，您可以添加 ngNativeValidate的指令。</h5>
  <div>查看更多Html5验证教程：<a target="_blank" href="https://blog.csdn.net/weixin_39141044/article/details/80721154">https://blog.csdn.net/weixin_39141044/article/details/80721154</a></div>
</div>
<div class="d-flex">
  <div class="col-6">
    <pre><code [highlight]="html"></code></pre>
    <hr />
    <div class="code-dark">
      <pre><code [highlight]="ts"></code></pre>
    </div>
  </div>
  <div class="col-6">
    <div class="card">
      <div class="card-header">使用HTML5表单验证</div>
      <div class="card-body">
        <form (submit)="submit()" ngNativeValidate>
          <div class="form-group">
            <label>用户名</label>
            <input type="text" name="user" required class="form-control" autocomplete="username">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">密码</label>
            <input type="password" name="password" required class="form-control" autocomplete="current-password">
          </div>
          <div class="form-group">
            <label>email</label>
            <input type="email" name="email" required class="form-control">
          </div>
          <div class="form-group">
            <label>url</label>
            <input type="url" name="url" required class="form-control">
          </div>
          <button type="submit" class="btn btn-primary">登录</button>
        </form>
      </div>
    </div>
  </div>
</div>
